<template>
	<common-table :dataSource="dataSource" :columns="columns" @submit="submit">
		<template #bodyCell="{ column, text, open,configopen }">
			<template v-if="column.key == 'action'">
				<a-space>
					<a-space>
						<a @click="open(true)"> 编辑 </a>
						<a @click="configopen(true)"> 配置 </a>
						<a @click="open(true)" style="color: red;"> 删除 </a>
					</a-space>
				</a-space>
			</template>
			<template v-if="column.key == 'name'">
				<a>{{ text }}</a> 
			</template>
		</template>

		<template #editor="{ form }">
			<a-form layout="vertical">
				<a-form-item label="模块">
					<a-input v-model:value="form.module" placeholder="单行输入"></a-input>
				</a-form-item>
				<a-form-item label="组件名">
					<a-input v-model:value="form.name" placeholder="单行输入"></a-input>
				</a-form-item>
				<a-form-item label="Tag">
					<a-input v-model:value="form.tag" placeholder="单行输入"></a-input>
				</a-form-item>
				<a-form-item label="说明">
					<a-textarea v-model:value="form.remark" placeholder="多行输入" :auto-size="{ minRows: 3, maxRows: 6 }">
					</a-textarea>
				</a-form-item>
				<!-- <a-form-item label="属性数">
					<a-input v-model:value="form.current"></a-input>
				</a-form-item> -->
			</a-form>
		</template>


		<template #config_editor="{ form }">
			
			<a-tabs v-model:activeKey="activeKey">
				<a-tab-pane key="1" tab="属性">
					<a-card size="small" style="margin-bottom: 10px;" :hoverable="true">
						<a-space style="margin-bottom: 5px;">
							<a-button @click="showChildrenDrawer">新建</a-button>
						</a-space>
						<a-table :pagination="false"  size="small" bordered :columns="attributeColumns" :dataSource="attributeData">
							<template #bodyCell="{ column, text,record }"> 
								<template v-if="column.key === 'action'">
									<span>
										<a @click="editorGrid(record)">编辑</a>
										<a style="color: red;margin-left: 15px;">删除</a>
									</span>
								</template>
							</template>
						</a-table>
					</a-card>
					
					<!-- 子抽屉 -->
					<a-drawer v-model:visible="childrenDrawer" title="Two-level Drawer" width="320" :closable="false" >
						
						<a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
							<a-form-item label="width" name="username" labelAlign="left" 
								:rules="[{ required: true, message: 'Please input your username!' }]"
							>
							      <a-input v-model:value="formState.username" />
							</a-form-item>
						</a-form>
						
						<template #footer>
						    <a-space>
						        <a-button type="primary">确认</a-button>
						        <a-button>取消</a-button>
						    </a-space>
						</template>
					</a-drawer>
				</a-tab-pane>
				<a-tab-pane key="2" tab="事件">
					<a-card size="small" style="margin-bottom: 10px;" :hoverable="true">
						<a-space style="margin-bottom: 5px;">
							<a-button>新建</a-button>
						</a-space>
						<a-table :pagination="false" size="small" bordered :columns="eventColumns" :dataSource="[{start:true}]">
							<template #bodyCell="{ column, record }">
								<template v-if="column.key === 'start'">
									<a-switch v-model:checked="record['start']" />
								</template>
								<template v-if="column.key === 'action'">
									<a-space>
										<a @click="editorGrid(record)"> 编辑 </a>
										<a @click="" style="color: red;"> 删除 </a>
									</a-space>
								</template>
							</template>
						</a-table>
					</a-card>
				</a-tab-pane>
				<a-tab-pane key="3" tab="方法">
					<a-card size="small" style="margin-bottom: 10px;" :hoverable="true">
						<a-space style="margin-bottom: 5px;">
							<a-button>新建</a-button>
						</a-space>
						<a-table :pagination="false" size="small" bordered :columns="methodColumns"
							:dataSource="[{start:true}]">
							<template #bodyCell="{ column, record }">
								<template v-if="column.key === 'start'">
									<a-switch v-model:checked="record['start']" />
								</template>
								<template v-if="column.key === 'action'">
									<a-space>
										<a @click="editorGrid(record)"> 编辑 </a>
										<a @click="" style="color: red;"> 删除 </a>
									</a-space>
								</template>
							</template>
						</a-table>
					</a-card>
				</a-tab-pane>
				<a-tab-pane key="4" tab="插槽">
					<a-card size="small" style="margin-bottom: 10px;" :hoverable="true">
						<a-space style="margin-bottom: 5px;">
							<a-button>新建</a-button>
						</a-space>
						<a-table :pagination="false" size="small" bordered :columns="slotColumns" :dataSource="[{start:true}]">
							<template #bodyCell="{ column, record }">
								<template v-if="column.key === 'start'">
									<a-switch v-model:checked="record['start']" />
								</template>
								<template v-if="column.key === 'action'">
									<a-space>
										<a @click="editorGrid(record)"> 编辑 </a>
										<a @click="" style="color: red;"> 删除 </a>
									</a-space>
								</template>
							</template>
						</a-table>
					</a-card>
				</a-tab-pane>
			</a-tabs>
			
		</template>
		
		
		
		
		
		
	</common-table>
	
</template>

<script setup lang="ts">
	import { defineComponent, ref, reactive } from "vue";
	import { TableColumnType } from "ant-design-vue";
	
	
	import CommonTable from "./common-table.vue";
	import ML_Compnents from "./components_class/index"
	import ML_Attributes from "./components_class/Attributes"
	
	
	let dataLists = []
	
	
	let activeKey =  ref('1') // tabs 的index
	
	let ml_comp = new ML_Compnents()
	let attr2 = new ML_Attributes()
	
	dataLists.push(ml_comp)
	
	dataLists[0].push_attr(attr2)
	let i = dataLists[0].push_attr(attr2)
	console.log(i)
	console.log(dataLists)
	
	
	
	
	
	interface FormState {
	  username ? : string;
	  password ? : string;
	  remember ? : boolean;
	}
	const formState = reactive<FormState>({
	  username: '',
	  password: '',
	  remember: true,
	});
	
	
	
	
	
	
	type ComponentsType = {
		id ? : number;
		module ? : string;
		name ? : string;
		count ? : number;
		value ? : string;
		current ? : number;
	};
	
	const dataSource = ref < ComponentsType[] > ([
		{ id: 1, module: '模块一', name: "测试", current: 0,}, 
	]);
	const columns = ref < TableColumnType[] > ([
		{ 
			key: "index", 
			width: 68,
			customRender: ({
				index
			}) => index + 1,
		},
		{ key: "module", dataIndex: "module", title: "模块", width: 200, },
		{ key: "name", dataIndex: "name", title: "组件名", width: 200, },
		{ key: "action", title: "操作", },
	]);
	const attributeColumns = ref < TableColumnType[] > ([{
			key: "index",
			width: 30,
			customRender: ({
				index
			}) => index + 1,
		},
		{
			title: '属性名',
			width: 100,
			dataIndex: 'module',
			key: "module",
		}, {
			title: '属性值',
			key: "value",
			width: 140,
			dataIndex: 'value',
		}, {
			title: '数据类型',
			dataIndex: 'type',
			key: "type",
			width: 100,
		}, {
			title: '说明',
			width: 140,
			dataIndex: 'desc',
			key: "desc",
		},
		{
			key: "action",
			title: "操作",
		},
	]);
	const eventColumns = ref < TableColumnType[] > ([{
			key: "index",
			width: 30,
			customRender: ({ index }) => index + 1,
		},
		{ title: '事件名', key: "module", dataIndex: 'name', }, 
		{ title: '启动', key: "start", dataIndex: 'start', }, 
		{ title: '说明', dataIndex: 'name', key: "start1", },
		{ key: "action", title: "操作", },
	]);
	const methodColumns = ref < TableColumnType[] > ([{
			key: "index",
			width: 30,
			customRender: ({
				index
			}) => index + 1,
		},
		{
			title: '方法名',
			dataIndex: 'name',
		}, {
			title: '启动',
			key: 'start',
			dataIndex: 'name',
		}, {
			title: '说明',
			dataIndex: 'name',
		},
		{
			key: "action",
			title: "操作",
		},
	]);
	const slotColumns = ref < TableColumnType[] > ([{
			key: "index",
			width: 30,
			customRender: ({
				index
			}) => index + 1,
		},
		{
			title: '插槽名',
			dataIndex: 'name',
		}, {
			title: '启动',
			key: 'start',
			dataIndex: 'name',
		}, {
			title: '说明',
			dataIndex: 'name',
		},
		{
			key: "action",
			title: "操作",
		},
	]);
	//属性默认数据
	const attributeData = ref < ComponentsType[] > ([{
		module: '',
		value: '1',
		type: '',
		desc: ''
	}]);
	
	//编辑行
	const editableData: UnwrapRef < Record < string, DataItem >> = reactive({}); 
	const editorGrid = (record: Object) => {
		console.log(record,record.value)
	};
	
	const childrenDrawer = ref<boolean>(false);
	
	const showChildrenDrawer = () => {
	      childrenDrawer.value = true;
	};
		
		
	const submit = (form: ComponentsType, close: Function) => {
		if (form.id) {
			for (let i = 0; i < dataSource.value.length; i++) {
				const element = dataSource.value[i];
				if (element.id === form.id) {
					Object.assign(element, form);
					close();
					break;
				}
			}
		} else {
			dataSource.value.push(Object.assign({
				id: 2
			}, form));
			close();
		}
	};
</script>
